<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span
                            style="
                                color: red;
                                position: relative;
                                top: 2px;
                                margin-right: 2px;
                            "
                            >*</span
                        >
                        <span style="width: 80px" class="s1">{{
                            $t('basics.renwumingchen')
                        }}</span>
                        <a-input
                            v-model="forms.task_name"
                            :placeholder="$t('basics.renwumingchenText')"
                        />
                    </div>
                    <div>
                        <a-popover po1ition="bottom">
                            <div style="display: flex; align-items: center">
                                <img
                                    src="@/assets/images/waring.png"
                                    alt=""
                                    style="height: 24px; cursor: pointer"
                                />
                            </div>
                            <template #content>
                                <div style="text-align: center; color: red">
                                    <p>{{ $t('basics.textOne') }}</p>
                                    <p>{{ $t('basics.textTwo') }}</p>
                                </div>
                            </template>
                        </a-popover>
                        <a-button
                            class="ml20 mr20"
                            type="primary"
                            @click="importButton"
                        >
                            {{ $t('basics.shangchuan') }}
                        </a-button>
                        <a-button type="primary" @click="tasks">
                            {{ $t('basics.historyTask') }}
                        </a-button>
                        <a-button
                            class="ml20"
                            type="secondary"
                            @click="resetButton"
                        >
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content-header mt10 mb10">
                <span class="tasks" v-if="appStore.language == 'zh_CN'">
                    <span class="text-[red] mr10">{{ task_name }}</span>
                    <span>{{ $t('basics.derenwu') }}</span>
                </span>
                <span class="tasks" v-else>
                    <span class="mr10">{{ $t('basics.derenwu') }}</span>
                    <span class="text-[red]">{{ task_name }}</span>
                </span>
            </div>
            <div class="container-content">
                <a-table
                    :columns="taskColumns"
                    :data="objValue"
                    :loading="loading"
                    row-key="id"
                    :pagination="false"
                >
                    <template #status="{ record }">
                        {{ getStatus(record.status) }}
                    </template>
                    <template #operate="{ record }">
                        <a-link
                            status="danger"
                            @click="
                                disable
                                    ? ''
                                    : taskOperation('delete', record, 'shanchu')
                            "
                        >
                            {{ $t('basics.shanchu') }}</a-link
                        >
                        <a-link @click="taskDetails(record)">
                            {{ $t('basics.taskDetails') }}</a-link
                        >
                    </template>
                </a-table>
            </div>
            <ma-import
                :render-to-body="false"
                ref="crudImportRefs"
                :upLoadData="importFile"
                downloadUrl="/TcardClient/task/download"
                @success="refresh"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import { getNum } from '@/api/america/usertask.js';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useAppStore } from '@/store';
import MaImport from './components/import.vue';
import { $request } from '@/utils/request';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const appStore = useAppStore();
const disable = ref(false);
const forms = ref({});
const crudImportRefs = ref();
const loading = ref(false);
const objValue = ref([]);
const router = useRouter();
const importFile = ref({
    url: '/TcardClient/task/import',
    params: forms.value
});
//   导入成功后
const refresh = () => {
    getList();
};

const taskOperation = (text, item, modeals) => {
    console.log(item);
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.ninuqeding') + t(`basics.${modeals}`) + '?',
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            disable.value = true;
            $request
                .post('/TcardClient/task/delete', { task_id: item.id })
                .then((res) => {
                    disable.value = false;
                    getList();
                });
        }
    });
};
const getStatus = (number) => {
    //   1未开始;显示开始按钮
    // 2进行中;显示停止按钮
    // 6 停止中 显示继续按钮和删除按钮
    // 3 已完成显示 删除按钮

    switch (number) {
        case 0:
            return t('basics.UpCross');
        case 1:
            return t('basics.NotYetStarted');
        case 2:
            return t('basics.UnderWay');
        case 3:
            return t('basics.completed');
        case 4:
            return t('basics.TaskProcessing');
        case 5:
            return t('basics.TaskProcessing');
        case 6:
            return t('basics.stop');
        case 7:
            return t('basics.InOperation');
        case 3:
            return t('basics.CompletedDisplay');

        default:
            console.log('Default');
    }
};
const importButton = (params) => {
    if (objValue.value.length) {
        proxy.$message.error(t('basics.deleteTask'));
        return;
    }
    if (!forms.value.task_name) {
        proxy.$message.error(t('basics.rewubitian'));
        return;
    }

    crudImportRefs.value.open();
};
const task_name = ref('');

// 获取列表数据
const getList = () => {
    loading.value = true;
    $request.get('/TcardClient/task/detail').then((res) => {
        task_name.value = res.task_name || '';
        objValue.value = res.id ? [res] : [];
        loading.value = false;
    });
};
const resetButton = () => {
    getList();
};
const numList = ref({});
const columns = ref([]);
const taskColumns = ref([
    {
        title: t('basics.xuhao'),
        dataIndex: 'id',
        minWidth: 100,
        slotName: 'id'
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        minWidth: 100
    },
    {
        title: t('basics.renwumingchen'),
        dataIndex: 'task_name',
        minWidth: 100
    },
    {
        title: t('basics.UploadQuantity'),
        dataIndex: 'num_of_upload',
        minWidth: 100
    },
    {
        title: t('basics.chenggongshuliang'),
        dataIndex: 'num_of_success',
        minWidth: 100
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 100,
        slotName: 'status'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        width: 150,
        slotName: 'operate'
    }
]);

columns.value = [
    {
        title: t('basics.account'),
        dataIndex: 'username',
        minWidth: 100,
        slotName: 'username'
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        minWidth: 200
    },
    {
        title: t('basics.fenpeishuliang'),
        dataIndex: 'num_of_assign_message',
        minWidth: 150,
        slotName: 'num_of_assign_message'
    },
    // {
    //   title: t('basics.fsSum'),
    //   dataIndex: 'num_of_assign_message',
    //   minWidth:150,
    //   slotName: 'num_of_assign_message'
    // },
    {
        title: t('basics.fsSecc') + numList.num_of_assign_message,
        dataIndex: 'num_of_success',
        minWidth: 150,
        slotName: 'num_of_success'
    },
    {
        title: t('basics.UploadQuantity'),
        dataIndex: 'num_of_need_message',
        minWidth: 150,
        slotName: 'num_of_need_message'
    },
    {
        title: t('basics.huifu'),
        dataIndex: 'num_of_reply_conversion',
        minWidth: 150
    },
    {
        title: t('basics.huifuNum'),
        dataIndex: 'num_of_reply',
        minWidth: 150,
        slotName: 'num_of_reply_conversion'
    },

    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 150,
        slotName: 'status'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        minWidth: 150,
        slotName: 'operate'
    }
];
getList();
const getNumList = () => {
    getNum().then((res) => {
        numList.value = res.data;

        columns.value = [
            {
                title: t('basics.account'),
                dataIndex: 'username',
                minWidth: 100,
                slotName: 'username',
                align: 'left'
            },
            {
                title: t('basics.createAt'),
                dataIndex: 'created_at',
                align: 'left',
                minWidth: 200
            },

            {
                title:
                    t('basics.fenpeishuliang') +
                    ' ' +
                    numList.value.num_of_assign_message,
                dataIndex: 'num_of_assign_message',
                minWidth: 150,
                align: 'left',
                slotName: 'num_of_assign_message'
            },
            {
                title:
                    t('basics.UploadQuantity') +
                    '  ' +
                    numList.value.num_of_need_message,
                dataIndex: 'num_of_need_message',
                minWidth: 150,
                align: 'left',
                slotName: 'num_of_need_message'
            },
            // {
            //   title: t('basics.fsSum'),
            //   dataIndex: 'num_of_assign_message',
            //   minWidth:150,
            //   slotName: 'num_of_assign_message'
            // },
            {
                title: t('basics.fsSecc') + '  ' + numList.value.num_of_success,
                dataIndex: 'num_of_pop',
                minWidth: 150,
                align: 'left'
            },
            // {
            //   title: t('basics.fsFail'),
            //   dataIndex: 'num_of_failed',
            //   minWidth:150,
            //   slotName: 'num_of_failed'
            // },
            {
                title:
                    t('basics.huifu') +
                    '  ' +
                    numList.value.num_of_reply_conversion,
                dataIndex: 'num_of_reply_conversion',
                minWidth: 150,
                align: 'left'
            },
            {
                title:
                    t('basics.huifuNum') +
                    ' ' +
                    numList.value.num_of_reply_rate,
                dataIndex: 'num_of_pop',
                minWidth: 150,
                slotName: 'num_of_pop',
                align: 'left'
            },

            {
                title: t('basics.status'),
                dataIndex: 'status',
                minWidth: 150,
                align: 'left',
                slotName: 'status'
            },
            {
                title: t('basics.controls'),
                dataIndex: 'operate',
                minWidth: 150,
                align: 'left',
                slotName: 'operate'
            }
        ];
    });
};

const taskDetails = ({ id }) => {
    router.push('/tcardMessage/taskDetails?task_id=' + id);
};

const tasks = () => {
    router.push('/tcardMessage/taskList');
};

getNumList();
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
.tasks {
    font-weight: bold;
    font-size: 16px;
    margin-right: 20px;
}
</style>
